<template>
  <div class="h_full w_full flexcolumn">
    <div class="p-15 flexbetween">
      <div class="c_222333 f-14">已结束({{ hangupList.length }})</div>
      <div class="c_878898">
        <i class="el-icon-delete-solid f-16 commhover mr-5" @click="handleClose"></i>
        <i class="el-icon-close f-16 commhover" @click="handleClose"></i>
      </div>
    </div>
    <div class="chatbody">
      <template v-if="hangupList.length">
        <chat-item
          v-for="(item, index) in hangupList"
          :key="index"
          :item="item"
          :active="selectItem && selectItem.wxid == item.wxid"
          @handleItem="handleChateItem"
        />
      </template>
      <div v-else class="flexcenter flexcolumn mt-100">
        <img src="@/assets/images/empty1.png" alt="" class="emptyimg mb-20" />
        <div class="f-14 c_text3">暂无对话</div>
      </div>
    </div>
  </div>
</template>

<script>
import ChatItem from './components/ChatItem.vue'
export default {
  data() {
    return {
      hangupList: [
        {
          wxid: "R:10814949724396927",
          nickname: "测试群",
          avatar:
            "//qyb-1253970052.cos.ap-shanghai.myqcloud.com/public/wechatdata/avatar/5424982/5922867c1cbd03953b39d60d0ece5f33.png",
          corp_name: "",
        },
      ],
      selectItem:null
    };
  },
  components:{
    ChatItem
  },
  methods: {
    handleClose() {
      this.$emit("close");
    },

    handleChateItem(item){
      this.selectItem = item
      this.chatkey = Date.now()
    },
  },
};
</script>

<style lang="scss" scoped>
.chatbody {
  flex: 1;
  height: calc(100% - 50px);
  position: relative;
}
.emptyimg {
  width: 90px;
  height: 90px;
}
</style>